<template>
  <div>
    <div class="goods-detail">
      <!-- 底部按钮 -->
      <footer class="bottom-button" v-if="selling">
        <mt-button @click.native="showDispute" class="blue">我要下架</mt-button>
      </footer>

      <!-- 属性卡片 -->
      <div class="block shadow">

        <div class="big-title">
          <span>{{info.name}}</span>
          <span class="red">¥ {{info.buy_price}}</span>
        </div>

        <div class="flex">
          <div class="item">
            <img :src="info.image">
            <span class="text">{{info.suffix_name}}</span>
          </div>
        </div>

        <div class="hint" v-if="selling">预计于{{info.show_time}}前售出回款</div>

        <div class="line"></div>

        <div class="flex">
          <div class="item">
            <span class="text mini">券号：</span>
            <span class="text black">{{info.imei}}</span>
          </div>
          <div class="item right" v-if="info.qr_code !== ''">
            <img src="/src/assets/icons/qrcode.png" class="qrcode" @click="openPopup">
          </div>
        </div>

        <div class="flex" v-if="info.pwd !== ''">
          <div class="item">
            <span class="text mini">密码：</span>
            <span class="text black">{{info.pwd}}</span>
          </div>
        </div>

        <div class="line"></div>

        <div class="flex">
          <div class="item">
            <p class="text mini">上架时间：{{info.up_time}}</p>
            <p class="text mini" v-if="selling">有效期：{{info.dead_time}}</p>
            <p class="text mini" v-if="offShelf">下架时间：{{info.del_time}}</p>
            <p class="text mini" v-if="offShelf">下架原因：{{info.status_text}}</p>
          </div>
        </div>

      </div>

      <!-- 二次纠纷 -->
      <div class="block explain" v-if="false">
        <p class="text">爆料源自热心卡友爆料，经小惠人工审核判断后发布。如有错误，请卡友们指正纠错！</p>
      </div>
      <!-- 二次纠纷按钮 -->
      <mt-button
        class="holded"
        :disabled="info.if_second_dispute"
        plain
        v-if="false"
        @click.native="secondDispute"
      >
        请求拦截并调查
      </mt-button>
      <p class="holded-text" v-if="false && info.if_second_dispute">调查工作正在进行中，如果有结论会消息推送给您。</p>

      <!-- 二维码显示 -->
      <mt-popup v-model="popupVisible" position="middle">
          <img :src="qrCode" class="qrcode-img">
      </mt-popup>
      <!-- 纠纷原因 -->
      <mt-popup v-model="disputePopup" position="middle">
        <div class="off-shelf-reason">
          <div class="title">下架原因，反馈给平台客服</div>
          <div class="radio-item" @click="disputeCheck(1, '串码有误')">
            <span>串码有误</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 1 ? '-full' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(2, '我已使用')">
            <span>我已使用</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 2 ? '-full' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(3, '准备自用')">
            <span>准备自用</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 3 ? '-full' : ''}.png`">
          </div>
          <mt-field label="其他" placeholder="请输入下架原因" v-model="reasonInput"></mt-field>
          <div class="button-group">
            <mt-button class="cancel" @click.native="closeDispute">取消</mt-button>
            <mt-button class="confirm" @click.native="offShelfGoods">确认</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'GoodsDetail',
    data () {
      return {
        info: {},
        // 显示隐藏模块
        selling: false,
        offShelf: false,
        // popup层
        popupVisible: false,
        qrCode: '',
        // 纠纷
        reason: '',
        reasonInput: '',
        reasonCheck: 0,
        disputePopup: false
      }
    },
    methods: {
      getInfo () {
        let params = {goods_id: this.$route.params.id}
        this.$post('/vue/goods/goods_detail', params, true).then(data => {
          this.info = data
          this.qrCode = data.qr_code
          // 重置状态
          this.selling = false
          this.offShelf = false
          let titleNum = 0
          switch (Number(data.status)) {
            case 1:
            case 4:
            case 5:
              this.selling = true
              titleNum = 1
              break
            case 3:
            case 6:
              this.offShelf = true
              titleNum = 2
              break
          }
          // 修改标题
          let titleArr = ['', '出售中', '已下架']
          window.document.title = `${data.name} - ${titleArr[titleNum]}`
        })
      },
      openPopup () {
        this.popupVisible = true
      },
      offShelfGoods () {
        let params = {
          id: this.$route.params.id,
          alter_status: 'stop_sell',
          reason: `${this.reason}~${this.reasonInput}`
        }
        if (params.reason === '~') {
          msg('请选择或者填写纠纷原因')
          return false
        }
        this.$post('/vue/goods/seller_feedback', params).then(data => {
          this.$post('/vue/goods/status_alter', params).then(data => {
            MessageBox.alert('券码已下架', '温馨提示').then(action => {
              if (action === 'confirm') {
                this.closeDispute()
                this.getInfo()
              }
            })
          })
        })
      },
      showDispute () {
        MessageBox.confirm('确定要下架吗？下架后不可再次上传。', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.disputePopup = true
          }
        })
      },
      closeDispute () {
        this.disputePopup = false
        this.reason = ''
        this.reasonCheck = 0
        this.reasonInput = ''
      },
      disputeCheck (check, reason) {
        this.reasonCheck = check
        this.reason = reason
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-light-blue: rgb(242, 247, 250);
  @c-blue: rgb(108, 184, 222);

  .goods-detail {
    height: calc(~'100vh - 57px');
    padding-bottom: 57px;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    .block {
      padding: 12px 12px 0;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
      text-align: left;
      .flex {
        display: flex;
        justify-content: space-between;
        .item {
          flex: 1;
          &.right {
            flex: 0 0 auto;
            text-align: right;
          }
        }
      }
      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
      .text {
        font-size: 13px;
        line-height: 24px;
        color: @c-124;
        vertical-align: middle;
        &.mini {
          font-size: 12px;
        }
        &.black {
          width: 85%;
          display: inline-block;
          font-size: 16px;
          line-height: 24px;
          color: rgb(44, 46, 55);
          word-wrap: break-word;
        }
      }
      .line-through {
        color: @c-169;
        text-decoration: line-through;
      }
      .hint {
        font-size: 13px;
        line-height: 24px;
        color: @c-dark-red;
      }
      .line {
        width: 100%;
        height: 1px;
        margin: 9px 0;
        background-color: @c-235;
      }
      &.shadow {
        padding-bottom: 12px;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        &::after {
          display: none;
        }
      }
      &::after {
        content: '';
        margin: 12px -12px 0;
        display: block;
        height: 8px;
        background-color: rgb(240, 244, 247);
      }
      .big-title {
        font-size: 15px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        span {
          flex: 1;
          &.red {
            font-size: 16px;
            color: @c-red;
            text-align: right;
          }
        }
      }
      .title　{
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 12px;
      }
      .read-more {
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        text-align: center;
        span {
          vertical-align: middle;
        }
        .link {
          color: @c-blue;
          text-decoration: underline;
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
      }
      .hide {
        display: none;
      }
      &.no-line {
        padding: 12px;
        &::after {
          display: none;
        }
      }
      &.explain {
        background-color: @c-246;
        padding: 12px;
        margin: 12px 0;
        .text {
          font-size: 12px;
          line-height: 20px;
          color: @c-169;
        }
        &::after {
          display: none;
        }
      }
    }
    .bottom-button {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      .mint-button {
        flex: 0 0 auto;
        height: 40px;
        padding: 7px 0;
        margin: 0 5%;
        width: 38%;
        text-align: center;
        border-radius: 20px;
        &.blue {
          color: #FFF;
          background-color: @c-blue;
        }
        &.black {
          color: @c-124;
          border: 1px solid #000;
        }
        &.is-disabled {
          background-color: @c-169;
        }
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .holded {
      margin: 12px auto;
      border-radius: 20px;
      height: 40px;
      width: 45%;
      border-color: @c-blue;
      .mint-button-text {
        font-size: 13px;
        line-height: 24px;
        color: @c-blue;
      }
      &.is-disabled {
        opacity: 1;
        background-color: @c-226;
        border-color: @c-226;
        .mint-button-text {
          color: #FFF;
        }
      }
    }
    .holded-text {
      font-size: 12px;
      line-height: 24px;
      color: @c-169;
      margin-top: 12px;
    }
    .mint-popup {
      width: auto;
      height: auto;
      padding: 15px;
      border-radius: 12px;
      background-color: #ebebeb;
      overflow-x: hidden;
      overflow-y: scroll;
      .picture {
        width: 80vw;
        height: 90%;
      }
      .off-shelf-reason {
        width: 64vw;
        img {
          width: 100px;
          height: 100px;
        }
        .title {
          font-size: 17px;
          font-weight: 600;
          line-height: 24px;
          color: #333;
          margin-bottom: 15px;
        }
        .radio-item {
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: space-between;
          font-size: 12px;
          line-height: 28px;
          color: @c-124;
          span {
            flex: 0 0 auto;
          }
          img {
            flex: 0 0 auto;
            padding: 4px;
            width: 18px;
            height: 18px;
          }
        }
        .mint-field {
          min-height: 0;
          height: 28px;
          background-color: transparent;
          .mint-cell-wrapper {
            padding: 0;
            line-height: 0;
            background-image: none;
            .mint-cell-title {
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
              text-align: left;
              width: 48px;
            }
            .mint-cell-value {
              border-bottom: 1px solid rgba(53, 53, 53, 0.25);
              .mint-field-core {
                font-size: 12px;
                background-color: transparent;
                &::-webkit-input-placeholder {
                  color: @c-169;
                }
              }
            }
          }
        }
        .button-group {
          display: flex;
          justify-content: space-between;
          margin: 15px -15px -15px;
          border-top: 1px solid rgba(53, 53, 53, 0.25);
          button {
            width: 40%;
            margin: 0 5%;
            flex: 0 0 auto;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            font-size: 16px;
            line-height: 24px;
            &.cancel {
              color: rgb(51, 51, 51);
              background-color: transparent;
            }
            &.confirm {
              color: rgb(0, 122, 255);
              background-color: transparent;
            }
          }
          .mint-button:not(.is-disabled):active::after {
            opacity: 0;
          }
        }
      }
    }
  }
  
  .pop-in-toast, .mint-toast {
    z-index: 2500;
  }
  .mint-indicator-wrapper {
    z-index: 2500;
  }
</style>